<template>
  <div>
    <van-nav-bar
      title="头条项目-登录"
    />
    <van-image
      width="100%"
      height="250"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <van-form @submit="onSubmit" >
        <van-field
          v-model="user.mobile"
          name="mobile"
          required
          label="手机号"
          placeholder="请输入11位手机号"
          :rules="[{ required: true, message: '请填写正确的11位手机号',
          pattern: /^1[3-9]\d{9}$/ }]"
        />
        <van-field
          v-model="user.code"
          type="password"
          name="code"
          required
          label="密码"
          placeholder="请填写6位密码"
          :rules="[{ required: true, message: '请填写正确的6位密码',
          pattern: /^\d{6}$/ }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
          :disabled="isLoading"
          :loading="isLoading" loading-text="正在登录"
          >登录</van-button>
        </div>

    </van-form>
    <van-cell-group style="padding-top: 25px;">
      <van-cell title="每个人都是你生命中的过客，自己要知道过什么样的生活，开心就好..."  />
      <van-cell title="玫瑰也未曾想过自己会毁在园丁手里."  />
    </van-cell-group>
  </div>
</template>

<script>
import { loginAPI } from '@/api/index.js'
import { Notify } from 'vant' // vant通知类型
import { setToken } from '@/utils/token.js'

export default {
  name: 'Login',
  data() {
    return {
      user: {
        mobile: '18451609344', // 手机号
        code: '246810' // 验证码（密码 246810规定死的接口模拟）
      },
      // loginList: [], // 接收登录成功后传来的token信息
      isLoading: false // 登录按钮加载状态
    }
  },
  methods: {

    // 登录接口,需求：点击登录后需要给用户一个提示（正在登陆中---），防止用户频繁点击！！！
    async login() {
      this.isLoading = true // 先启动按钮禁用和加载效果
      try {
        const { data: res } = await loginAPI(this.user)
        // 设置token
        setToken(res.data.token)
        Notify({ type: 'success', message: '登录成功' })

        this.$router.replace('/layout/home') // login sucess replace login page
      } catch (err) {
        Notify({ type: 'danger', message: '账号或密码错误' })
        console.log(err)
      }
      this.isLoading = false // 取消按钮禁用和加载效果
    },
    // 表单验证
    async onSubmit(values) {
      // console.log('submit', values)
      // 请求登录接口
      this.login()
    }
  }
}
</script>

<style lang="less"  scoped>
// .van-nav-bar{
//   background-color: #007bff
// }
// /deep/.van-nav-bar__title {
//   color: white;
// }
</style>
